import React, { useState, useEffect } from 'react';
import { List, Typography, Dropdown, Menu, Space, Spin, Empty } from 'antd';
import { MoreOutlined, FileTextOutlined, PictureOutlined, PlayCircleOutlined } from '@ant-design/icons';
import styles from './historyFile.module.less';

const { Text, Title } = Typography;

const HistoryFile = () => {
  const [files, setFiles] = useState([]);
  const [loading, setLoading] = useState(false);

  // 获取历史记录文件列表
  const fetchFiles = async () => {
    setLoading(true);
    try {
      const mockFiles = [
        {
          id: 1,
          name: '您已添加文档1.docx',
          time: '2分钟前',
          type: 'doc',
          icon: <FileTextOutlined style={{ color: '#FF7B7B' }} />,
          group: '今天'
        },
        {
          id: 2,
          name: '您已添加图片1.png',
          time: '7分钟前',
          type: 'image',
          icon: <PictureOutlined style={{ color: '#5C9DFF' }} />,
          group: '今天'
        },
        {
          id: 3,
          name: '你已经添加了视频1.cc',
          time: '10分钟前',
          type: 'video',
          icon: <PlayCircleOutlined style={{ color: '#B37CFF' }} />,
          group: '今天'
        },
        {
          id: 4,
          name: '你已经添加了视频1.mp4',
          time: '2天前',
          type: 'video',
          icon: <PlayCircleOutlined style={{ color: '#4CD263' }} />,
          group: '2天前'
        },
        {
          id: 5,
          name: '您已添加文档2.docx',
          time: '2天前',
          type: 'doc',
          icon: <FileTextOutlined style={{ color: '#FF7B7B' }} />,
          group: '2天前'
        },
        {
          id: 6,
          name: '您已添加文档3.docx',
          time: '4天前',
          type: 'doc',
          icon: <FileTextOutlined style={{ color: '#FF7B7B' }} />,
          group: '4天前'
        },
        {
          id: 7,
          name: '您已添加图片1.jpeg',
          time: '4天前',
          type: 'image',
          icon: <PictureOutlined style={{ color: '#5C9DFF' }} />,
          group: '4天前'
        }
      ];
      setFiles(mockFiles);
    } catch (error) {
      console.error('获取历史记录失败:', error);
    }
    setLoading(false);
  };

  useEffect(() => {
    fetchFiles();
  }, []);

  // 处理文件操作
  const handleFileAction = (action, file) => {
    switch (action) {
      case 'open':
        // 打开文件
        window.open(file.url, '_blank');
        break;
      case 'location':
        // 查看文件位置
        // 实现导航到文件所在目录的逻辑
        break;
      case 'delete':
        // 从历史记录中删除
        setFiles(prevFiles => prevFiles.filter(f => f.id !== file.id));
        break;
      default:
        break;
    }
  };

  // 更新文件操作菜单
  const actionMenu = (file) => (
    <Menu onClick={({ key }) => handleFileAction(key, file)}>
      <Menu.Item key="open">打开</Menu.Item>
      <Menu.Item key="location">查看位置</Menu.Item>
      <Menu.Item key="delete" danger>从历史记录中移除</Menu.Item>
    </Menu>
  );

  // 按组渲染文件列表
  const renderFileGroup = (group) => {
    const groupFiles = files.filter(file => file.group === group);

    return (
      <div key={group} className={styles.fileGroup}>
        <Text className={styles.groupTitle}>{group}</Text>
        <List
          dataSource={groupFiles}
          loading={loading}
          renderItem={file => (
            <List.Item className={styles.fileItem}>
              <div className={styles.fileCard}>
                <div className={styles.fileInfo}>
                  <Space align="center">
                    {file.icon}
                    <Text className={styles.fileName}>{file.name}</Text>
                  </Space>
                </div>
                <div className={styles.fileActions}>
                  <Text type="secondary" className={styles.fileTime}>
                    {file.time}
                  </Text>
                  <Dropdown
                    overlay={() => actionMenu(file)}
                    placement="bottomRight"
                    trigger={['click']}
                  >
                    <MoreOutlined className={styles.moreAction} />
                  </Dropdown>
                </div>
              </div>
            </List.Item>
          )}
        />
      </div>
    );
  };

  // 获取所有分组
  const groups = [...new Set(files.map(file => file.group))];

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <Title level={4}>历史记录</Title>
      </div>

      <div className={styles.content}>
        {loading ? (
          <div style={{ textAlign: 'center', padding: '40px 0' }}>
            <Spin />
          </div>
        ) : files.length === 0 ? (
          <Empty description="暂无历史记录" />
        ) : (
          groups.map(group => renderFileGroup(group))
        )}
      </div>
    </div>
  );
};

export default HistoryFile;